import { getFrameList } from '@/api/manager';
import { PageContainer } from '@ant-design/pro-components';
import { useNavigate } from '@umijs/max';
import { Button, Form, Input, Table } from 'antd';
import React, { useState } from 'react';

export default () => {
  const [createModalVis, setCreateModalVis] = useState(false);
  const [infoModalVis, setInfoModalVis] = useState(false);
  const [infoModalVis2, setInfoModalVis2] = useState(false);
  const [data, setData] = useState([]);
  const [editRow, setEditRow] = useState(null);

  const [createForm] = Form.useForm();
  const [editForm] = Form.useForm();
  const [searchForm] = Form.useForm();

  const navigate = useNavigate();

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '个人照片',
      dataIndex: 'avatar',
      key: 'avatar',
      render: (_) =>
        !_ ? (
          '暂无'
        ) : (
          <img
            src={_}
            alt=""
            style={{ width: '50px', height: '50px', objectFit: 'contain', borderRadius: 6 }}
          />
        ),
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      render: (_) => {
        if (_) return _;
        return '暂无';
      },
    },
    {
      title: '区划',
      dataIndex: 'area',
      key: 'area',
      render: (_) => {
        if (_) return _;
        return '暂无';
      },
    },
    {
      title: '任职单位',
      dataIndex: 'company_name',
      key: 'company_name',
      render: (_) => {
        if (_) return _;
        return '暂无';
      },
    },
    {
      title: '项目单位',
      dataIndex: 'project_company_name',
      key: 'project_company_name',
      render: (_) => {
        if (_) return _;
        return '暂无';
      },
    },
    {
      title: '项目名称',
      dataIndex: 'project_name',
      key: 'project_name',
      render: (_) => {
        if (_) return _;
        return '暂无';
      },
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      width: 150,
      render: (_, record) => {
        return (
          <div className="flex-aic">
            <Button
              type="primary"
              onClick={() => {
                navigate('/frame-personManage/' + record.id);
              }}
            >
              查看
            </Button>
          </div>
        );
      },
    },
  ];

  const columns3 = [
    {
      title: '时间',
      dataIndex: 'time',
      key: 'time',
    },
    {
      title: '操作人',
      dataIndex: 'oprator',
      key: 'oprator',
    },
    {
      title: '操作内容',
      dataIndex: 'description',
      key: 'description',
    },
  ];

  const init = async () => {
    const searchVals = searchForm.getFieldsValue() || {};
    console.log('😈searchVals', searchVals);
    const resp = await getFrameList(searchVals);
    console.log('😈resp', resp);
    let { list } = resp?.data || {};
    console.log('😈list', list);
    list = list?.map((item) => {
      if (item.area) {
        item.area = item.area?.split(',');
      }

      return item;
    });
    console.log('😈list', list);
    setData(list);
  };

  React.useEffect(() => {
    init();
  }, []);

  return (
    <PageContainer>
      <div className="flex-bt">
        <div className="flex-aic">
          <Form form={searchForm}>
            <Form.Item name="name" noStyle>
              <Input placeholder="请输入姓名" style={{ width: '200px' }}></Input>
            </Form.Item>
            <Form.Item name="company_name" noStyle>
              <Input
                placeholder="请输入任职单位"
                style={{ width: '200px' }}
                className="ml10"
              ></Input>
            </Form.Item>
            <Form.Item name="project_name" noStyle>
              <Input
                placeholder="请输入项目名称"
                style={{ width: '200px' }}
                className="ml10"
              ></Input>
            </Form.Item>
          </Form>
        </div>
      </div>
      <div className="flex-bt mt10">
        <div></div>
        <div>
          <Button type="primary" onClick={init}>
            搜索
          </Button>
        </div>
      </div>

      <Table className="mt10" columns={columns} dataSource={data}></Table>
    </PageContainer>
  );
};
